<template>
    <div class="message_box">
        <div class="message_top">
            <img src="../assets/image/information.png" class="information">
        </div>
        <div class="message_middle">
            <div class="message_con">
                <div class="date_list dd-clearfix">
                    <mu-date-input  icon="today" color="#d4e2ef" underline-color="#d4e2ef" display-color="#0287b2" class="date_input dd-fl" v-model="value1" label="开始时间" type="date" label-float></mu-date-input>
                    <mu-date-input  icon="today" color="#d4e2ef" underline-color="#d4e2ef" display-color="#0287b2" class="date_input dd-fl" v-model="value2" label="结束时间" type="date" label-float></mu-date-input>
                    <mu-select label="单位" class="dd-fl unit" label-float  v-model="normal.value1">
                        <mu-option v-for="option,index in options" :key="option" :label="option" :value="option"></mu-option>
                    </mu-select>
                    <mu-button color="#0287b2" class="fr search">搜索</mu-button>
                </div>
                <div class="date_table">
                    <mu-data-table stripe  :columns="columns" :sort.sync="sort" :hover="false"  @sort-change="handleSortChange" :data="list.slice(0, 4)">
                        <template slot-scope="scope">
                            <td>{{scope.row.time}}</td>
                            <td class="is-center">{{scope.row.type}}</td>
                            <td class="is-center">{{scope.row.content}}</td>
                            <td class="is-center dd-clearfix" v-bind:style="{'color':scope.row.carbs.color}" >
                                <svg class="icon" :class="scope.row.carbs.class"  v-bind:style="{'color':scope.row.carbs.color}" aria-hidden="true">
                                    <use v-bind:xlink:href = scope.row.carbs.icon></use>
                                </svg>
                                {{scope.row.carbs.handle}}
                            </td>
                        </template>
                    </mu-data-table>
                </div>
                <mu-pagination raised :total="100" class="page_btn" :page-count="5" :current.sync="current"></mu-pagination>
            </div>
        </div>
        <div class="back_footer">
            <img src="../assets/image/danger_bottom_bg.png" class="danger_bottom_bg">
            <div class="back_btn dd-fr" v-on:click="back">
                <img src="../assets/image/danger_btn.png">
                <span>返回主页</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                options: [
                    '年', '月', '日', '季度',
                ],
                normal: {
                    value1: '',
                    value2: '',
                    value3: '',
                    value4: 'Option 1',
                    value5: 'Option 2'
                },
                finshshow: false,
                value1: undefined,
                value2: undefined,
                current: 1,
                sort: {
                    name: '',
                    order: 'asc'
                },
                columns: [
                    { title: '信息时间', width: 200, name: 'time' },
                    { title: '信息类别', name: 'type', width: 126, align: 'center', sortable: true },
                    { title: '信息内容', name: 'content', width: 300, align: 'center', sortable: true },
                    { title: '操作', name: 'carbs', width: 200, align: 'center', sortable: true },
                   
                ],
                list: [
                    {
                        time: '2018年4月2日',
                        type: '会议',
                        content: '12:00至18:00，3月份工作总结',
                        carbs: {handle:'已完成',color:'#16bdf4',icon:'#icon-yiwancheng2',class:'blue_icon'}
                    },
                    {
                        time: '2018年4月20日',
                        type: '会议',
                        content: '非工作时间用电',
                        carbs: {handle:'未完成',color:'#ec6110',icon:'#icon-weiwancheng',class:'no_finsh'}                
                    },
                    {
                        time: '2018年4月2日',
                        type: '会议',
                        content: '12:00至18:00，3月份工作总结',
                        carbs: {handle:'已完成',color:'#16bdf4',icon:'#icon-yiwancheng2',class:'blue_icon'}
                    },
                    {
                        time: '2018年4月20日',
                        type: '会议',
                        content: '非工作时间用电',
                        carbs: {handle:'未完成',color:'#ec6110',icon:'#icon-weiwancheng',class:'no_finsh'}                
                    }         
                ]
            };
        },
        methods: {
            handleSortChange ({name, order}) {
                this.list = this.list.sort((a, b) => order === 'asc' ? a[name] - b[name] : b[name] - a[name]);
            },
            back(){
                this.$router.go(-1);//返回上一层
            },
            
        }
    };
</script>

<style lang="scss">

//主题
@import '~@/assets/style/theme/default.scss';
//样式
@import '~@/assets/style/style.scss';

</style>